<template>
    <div class="register">
        <van-nav-bar
            title="注册"
            left-text="返回"
            left-arrow
            @click-left="goback"
        />
        <div class="side">
            <h2>欢迎注册</h2>
            <h2>每一天,乐在阅读</h2>
        </div>

        <van-cell-group inset>
            <van-field v-model="text" label="昵称" />
            <van-field v-model="tel" type="tel" label="手机号" />
        </van-cell-group>

        <van-cell-group inset>
            <!-- 输入密码 -->
            <van-field v-model="password" type="password" label="密码" />
            <!-- 输入密码 -->
            <van-field
                v-model="password"
                type="password"
                label="再次输入密码"
            />
        </van-cell-group>

        <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
                注册
            </van-button>
        </div>

        <div class="footer">
            Copyright <span>©</span> 2022-2022 All Rights Reserved
        </div>
    </div>
</template>
<script>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

export default {
    setup() {
        const router = useRouter()
        const goback = () => {
            router.push('/login')
        }
        const tel = ref('')
        const text = ref('')
        const digit = ref('')
        const number = ref('')
        const password = ref('')

        return { tel, text, digit, number, password, goback }
    },
}
</script>

<style scoped lang="scss">
.footer {
    position: fixed;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
    color: #bbb;
    text-align: center;
}
.side {
    margin: 0 auto;
    width: 343.2px;
}
.side h2 {
    margin-top: 20px;
    margin-bottom: 20px;
    font: 24px '宋体';
    //color: rgb(13, 35, 56);
}

.register {
    background-color: #fff;
    min-height: 100vh;
    // --van-cell-group-inset-padding: 0;
    --van-cell-horizontal-padding: 0;
}
</style>
